<template>
<div class="pad20">
    <div class=" clearfix">
        <span>
            <span>服务类型</span>
            <el-select class="left10" v-model="value1" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </span>
        <span class="left20">
            <span>服务项目</span>
            <el-select class="left10" v-model="value2" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </span>
        <span class="left20">
            <span>状态</span>
            <el-select class="left10" v-model="value3" placeholder="请选择">
                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </span>
        <span class="left20">
            <span>其他</span>
            <el-input style="width: 220px" class="left10" v-model="input" placeholder="姓名/身份证/计划编号/服务商/服务人员"></el-input>
        </span>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary" class="right">新增</el-button>
    </div>
    <el-table ref="multipleTable" class="top20" :data="list" fit highlight-current-row style="width: 100%;" header-row-class-name="tableHeader">
        <el-table-column label="计划编号" prop="a" align='center'></el-table-column>
        <el-table-column label="姓名" prop="b" align='center'></el-table-column>
        <el-table-column label="身份证" prop="c" align='center'></el-table-column>
        <el-table-column label="服务类型" prop="d" align='center'></el-table-column>
        <el-table-column label="服务项目" prop="e" align='center'></el-table-column>
        <el-table-column label="服务商" prop="f" align='center'></el-table-column>
        <el-table-column label="服务人员" prop="g" align='center'></el-table-column>
        <el-table-column label="状态" prop="h" align='center'></el-table-column>
        <el-table-column label="操作" align='center' width='200'>
            <template slot-scope="{row,$index}">
                <el-button type="primary">查看</el-button>
                <el-button type="primary" class="left10" @click="dialogVisible = true">派单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="align-right top20">
        <el-pagination v-show="total>0" :total="total" :current-page.sync="originalQuery.pageNumber" :page-size="originalQuery.pageSize" background layout="prev, pager, next" @current-change="getList" @size-change="sizeChange" />
    </div>
    <el-dialog
        title="派单"
        :visible.sync="dialogVisible"
        width="600px">
        <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="服务类型：">
                        助浴
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="服务项目：">
                        协助洗澡
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="服务地址：">
                        武汉市江汉区万松街王家墩街道八一路299号
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="开始时间：">
                        2020-7-13  12:00
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结束时间：">
                        2020-7-13 14:00
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="主管社区：">
                        武汉市江汉区万松社区
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="服务频率：">
                        一周2次
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="服务单价：">
                        100元
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="单价比例：">
                        <el-row>
                            <el-col :span="8">
                                <div class="center">市补贴占比</div>
                                <el-input value="30%" style="width: 100%" />
                            </el-col>
                            <el-col :span="8">
                                <div class="center">区补贴占比</div>
                                <el-input value="50%" style="width: 100%" />
                            </el-col>
                            <el-col :span="8">
                                <div class="center">自费占比</div>
                                <el-input value="20%" style="width: 100%" />
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="单价组成：">
                        <el-row>
                            <el-col :span="8">
                                <div class="center">30元</div>
                            </el-col>
                            <el-col :span="8">
                                <div class="center">50元</div>
                            </el-col>
                            <el-col :span="8">
                                <div class="center">20元</div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="服务中心：">
                <el-select style="width: 100%" class="left10" v-model="value4" placeholder="请选择">
                    <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务人员：">
                <el-select style="width: 100%" class="left10" v-model="value5" placeholder="请选择">
                    <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        </span>
        </el-dialog>
</div>
</template>

<script>


export default {
    components: {},
    data() {
        return {
            form: {},
            dialogVisible: false,
            daterange: '',
            list:[
                {a: '2020071212131001', b: '李明汉', c: '420103195710042115', d: '助餐', e: '幸福套餐A', f: '武汉至爱健康养老服务有限公司', g:'倪璇', h: '完成'},
                {a: '2020071012131002', b: '陈晓珍', c: '420103195610042165', d: '助洁', e: '擦玻璃服务', f: '秦淮区龙王庙社区党群服务中心', g:'张英', h: '完成'},
                {a: '2020061712181012', b: '潘建宝', c: '420104193507023331', d: '护助', e: '上门理发', f: '贺家墩社区养老院', g:'李月琴', h: '完成'},
                {a: '2020061512181013', b: '程浦阳', c: '420102193301242437', d: '助医', e: '陪同就医', f: '唐家墩街西桥社区长者照护中心', g:'吕文珍', h: '完成'},
                {a: '2020061312181014', b: '周细华', c: '420102194506232029', d: '助乐', e: '陪聊服务', f: '单洞社区颐伦老年人服务中心', g:'杭飒', h: '完成'},
                {a: '2020051312181018', b: '张厚英', c: '420102195006232021', d: '助行', e: '陪伴老人外出散步', f: '唯老汇商一社区居家养老服务中心', g:'王瑞琴', h: '完成'},
                {a: '2020051112181014', b: '胡维范', c: '420104193707023339', d: '护助', e: '老人衣物清洗和更换', f: '唐家墩马场社区居家养老中心', g:'陆建毅', h: '完成'},
                {a: '2020051012131003', b: '李惠华', c: '420103195510042165', d: '助洁', e: '打扫卫生', f: '王家巷社区炎黄居家养老服务中心', g:'张翔', h: '完成'},
                
            ],
            total: 4000,
            originalQuery: {
                pageNumber: 1,
                pageSize: 20,
            },
            input: '',
            value1: '',value2: '',value3: '',value4: '',value5: '',
            options: [{
                    label: '一级',
                    value: 1
                },
                {
                    label: '二级',
                    value: 2
                },
                {
                    label: '三级',
                    value: 3
                },
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        sizeChange(){

        },
        getList(){
            
        }
    }
};
</script>

<style scoped>

</style>
